@charset "utf-8";
$bluecolor:#2395cb;
$whitecolor:#f6f6f6;
$blackfontcolor:#272727;
$greencolor:#3ed1a4;
$purplecolor:#895ea3;
$weakwhite:#f6f6f6;
$grayfont:#b6b6b6;
$bluefont:#0b5ae4;
@mixin basic($wid,$hei,$bgcolor){
    width: $wid;
    height: $hei;
    background: $bgcolor;
}

@mixin secondbasic($wid,$hei,$mar){
    width: $wid;
    height: $hei;
    margin: $mar;
}   

header{
    width: 100%;
    background: white;
    nav{
        width: 995px;
        height: 96px;
        margin: 0 auto;
                
        .logo{
            display: inline-block;
            width: 300px;
            height: 96px;
            img{
                width: 100%;
            }
         }
    ul{
        width: 600px;
        font-size: 0;
        li.active{
            background: #faf8f8;
            border-bottom: 3px solid $bluecolor;
        }
        li{
            display: inline-block;
            width: 85px;
            height: 93px;
            padding-top: 28px;
            text-align: center;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            a{
                color: #000000;
            }
        }
        li:hover{
            background: #faf8f8;
            border-bottom: 3px solid $bluecolor;
        }
    }
}
            .top{
                background: #dfdfde;
                height: 40px;
                line-height: 40px;
                .main{
                    width: 995px;
                    margin: 0 auto;
                    a{
                        color: #000000;
                        font-size: 14px;
                        margin-left: 25px;
                    }
                }
            }
        }
        

footer{
   width: 100%;
   height: 137px;
   background: $bluecolor;
  .footer-top{ 
      width: 100%;
      height: 102px;
      font-size: 13px;
      .top{
       width: 196px;
       height: 20px;
       margin: 0 auto;
       font-size: 13px;
       padding-top: 27px;
       span{
           line-height: 13px;
           color: #faf9f9;
       }
       
       span:first-child{
           margin-right: 18px;
           line-height: 18px;
       }
       
       span:last-child{
           width: 68px;
           height: 20px;
           margin-left: 20px;
           
       }
   }
   ul{
       width: 406px;
       height: 13px;
       font-size: 13px;
       margin: 26px auto 23px;
       text-align: center;        
       li{
           display: inline-block;
           color: #faf9f9;
           a{
               color: #faf9f9;
           }
       }
   }
   
   }
   
   .footer-bottom{
       width: 100%;
       height: 35px;
       background: #1c1b29;
       p{
           width: 489px;
           height: 13px;
           font-size: 13px;
           text-align: center;
           color: #faf9f9;
           margin: 0 auto;
       line-height: 35px

        }
    }
     
}

section{
    width: 100%;
}

.product-banner{
    width: 100%;
//  height: 253px;  
    img{
        width: 100%;
        height: 100%;
    }
}

.new-publish{
    @include secondbasic(100%,441px,0 auto);
    padding-bottom: 41px;
    background: #F6F6F6 ;
    .publish-top{
        @include secondbasic(1063px,29px,0 auto);
        p{
            width: 202px;
            height: 13px;
            font-size: 13px;
            text-align: left;
            line-height: 29px;
            span{
                line-height: 29px;
                a{
                    color: #404040;
                }
            }
        }
    }
    .publish-bottom{
        width: 1064px;
        height: 421px;
        margin: 0 auto;
        border-bottom: 1px solid #bababa;
        .bottom-left{
                position: relative;
                .outer{
                    width: 469px;
                    height: 321px;
                    border-right: 1px solid #bababa;
                    .imgwrap{
                        width: 188px;
                        height: 251px;
                        margin: 10px auto 0;
                        padding-top: 61px;
                        img{
                            width: 100%;
                        }
                    }
                span{
                    position: absolute;
                    width: 27px;
                    height: 27px;
                    right: 16px;
                    bottom: 105px;
                    img{
                        width: 100%;
                    }
                }
                }
                ul{
                width: 471px;
                height: 88px;
                li:first-child{
                 border-left: 1px solid #bababa;   
                }
                
                 li:last-child{
                    a{
                        margin-top: 0;
                        width: 88px;
                    }
                 }
                
                li{
                    float: left;
                    width: 92px;
                    height: 89px;
                    border: 1px solid #bababa;
                    line-height: 89px;
                    text-align: center;
                    a{
                        display: inline-block;
                        margin-top: 5px;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }

        .bottom-right{
            width: 530px;
            height: 359px;
            padding-left: 61px;
            padding-top: 61px;
            h5{
                font-size: 25px;
            }
            h5:nth-of-type(2){
                margin-top: 21px;
            }
            h6{
                margin-top: 26px;
                font-size: 16px;
                margin-bottom: 13px;
            }
            p{
                font-size: 12px;
                line-height: 21px;
            }
            .btn{
                margin-top: 23px;
                span{
                     width: 170px;
                     height: 50px;
                     display: inline-block;
                     background: #468bd9;
                     text-align: center;
                     line-height: 50px; 
                     border-radius: 5px;
                     a{
                         color: white;
                         font-size: 19px;
                         width: 170px;
                         height: 50px;
                         display: inline-block;
                     }
                }
                span:nth-of-type(2){
                    margin-left: 53px;
                    background: #b5b5b5;
                }
            }
        }
    }
}

.detail-item-nav{
    @include secondbasic(100%,100px,0 auto);
    background-color: #b5b5b5;
    ul{
         @include secondbasic(1013px,100px,0 auto);
        font-size: 0;
        li{
            font-size: 21px;
            display: inline-block;
            width: 94px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            margin-left: 66px;
            a{
                color: #f1f1f1;
            }
        }
        li:first-child{
            margin-left: 0;
        }
        li.active{
            background: #faf8f8;
            width: 94px;
            height: 97px;
            border-bottom: 7px solid #3c9cd3;
            a{
                color: #468bd9;
            }
        }
        
         li:hover{
            background: #faf8f8;
            width: 94px;
            height: 97px;
            border-bottom: 7px solid #3c9cd3;
            a{
                color: #468bd9;
            }
        }

    }
}

.carou{
     width: 100%;
     height: 545px;
     position: relative; 
     box-shadow: 0 7px 16px #dbe9f0; 
    .imgWrap{
        @include secondbasic(100%,255px,0 auto);
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.adv{
    width: 100%;
//  height: 2690px;
    .high-definition{
        @include secondbasic(985px,530px,72px auto 0);
        .title{
          @include secondbasic(243px,87px,0 auto);
          h3{
              font-size: 33px;
              margin-top: 15px;
              text-align: center;
              margin: 0 auto;
              color: #0b5ae4;
              font-weight: normal;
          }
          p{
              font-size: 12px;
              line-height: 27px;
              text-align: center;
              width: 245px;
              margin: 0 auto;
              color: #b6b6b6;
          }
        }
        .imgwrap{
            @include secondbasic(600px,340px,0 auto);
            padding-left: 46px;
            padding-top: 80px;
            div:first-of-type{
                width: 263px;
                height: 136px;
                margin-top: 102px;        
            }
            div:last-of-type{
               width: 259px;
               height: 340px;
               margin-left: 46px;
            }
        }
    }
    .night-sight,.send-message{
        @include secondbasic(985px,706px,55px auto 0);
        .title{       
            h5{
                font-size: 33px;
                text-align: center;
                color: $bluefont;
                margin-top: 61;
            }
            p{
               font-size: 12px;
               text-align: center;
               color: $grayfont;
               line-height: 21px;
            }
            p:first-of-type{
                margin-top: 5px;
            }
            p:nth-of-type(2){
                margin-top: 17px;   
            }
        }
        .imgwrap{
            @include secondbasic(747px,552px,33px auto 0);
            img{
                width: 100%;               
            }
        }
    }
}

.adv>.send-message{
    width: 985px;
    height: 611px;
}


.use-place{
    @include secondbasic(985px,763px,55px auto 0);
    position: relative;

    .mid-pic{
       width: 246px;
       height: 245px;
       position: absolute;
       left: 50%;
       margin-left: -123px;
       top: 143px;
       img{
           width: 100%;
       }
    }
    h2{
       text-align: center; 
       font-size: 32px;
       font-weight: normal;
       color: $bluefont;
    }
    
    .content:first-of-type{
        margin-top: 44px;
    }
    .content{
        width: 985px;
        height: 253px;
        .block{
            p{
                text-align: left;
            }
        }
        .block{
            width: 492px;
            height: 253px;
            float: left;
            text-align: center;
            h5{
                font-size: 16px;
                font-weight: normal;
                color: $bluefont;
            }
            p{
                width: 171px;
                height: 51px;
                margin: 4px auto 0;
                font-size: 12px;
                line-height: 16px;
                margin: 2px auto 0;
            }
            .imgwrap{
                width: 170px;
                height: 170px;
                margin: 0 auto ;
                img{
                    width: 100%;
                }
            }
        }  
    }   
}


.argument-table{
    width: 1023px;
    margin: 0 auto;
    .left{
        width: 355px;
        height: 817px;        
        .container{
            width: 147px;
            height: 168px;
            padding-left: 153px;
            .imgwrap:first-child{
                margin-top: 227px;
            }
            .imgwrap:last-child{
                margin-top: 166px;
            }
            .imgwrap{
            width: 147px;
            height: 168px;    
            img{
                width: 100%;
                height: 100%;
            }
        }
        }
    }
    .right{
        width: 568px;
        height: 817px;
        margin-top: 103px;
        table{
            width: 568px;
            height: 817px;
            font-size: 10px;
            td{
                border: 1px solid black;
            }
      
        }
    }
}

.detail-item-nav{
    @include secondbasic(100%,100px,129px auto 0);
    background-color: #b5b5b5;
    ul{
         @include secondbasic(1013px,100px,0 auto);
        font-size: 0;
        li{
            font-size: 21px;
            display: inline-block;
            width: 94px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            margin-left: 66px;
            a{
                color: #f1f1f1;
            }
        }
        li:first-child{
            margin-left: 0;
        }
        li.active{
            background: #faf8f8;
            width: 94px;
            height: 97px;
            border-bottom: 7px solid #3c9cd3;
            a{
                color: #468bd9;
            }
        }
        
         li:hover{
            background: #faf8f8;
            width: 94px;
            height: 97px;
            border-bottom: 7px solid #3c9cd3;
            a{
                color: #468bd9;
            }
        }

    }
}

.last-productitems{
    width: 985px;
    height: 168px;
    margin: 77px auto 122px;
    font-size: 0;
    li{
        display: inline-block;
        width: 188px;
        height: 168px;
    }
}
